<template>
	<view class="m-modal" v-if="show">
		<u-modal v-model="show" width="100%" :showTitle="false" :mask-close-able="true" :show-confirm-button="false">
			<view class="content-box" @click="close">
				<view class="center-content modal-content-box" @click.stop>
					<view class="base-info-box modal-content" v-if="type=='base'">
						<!-- 卡牌私人信息属性 -->
						<view class="info-title">基础信息
							<view class="bottom-line">
								<view class="line"></view>
								<view class="line-content"></view>
								<view class="line"></view>
							</view>
						</view>
						<view class="private-info">
							<view class="private-item" v-for="(item,index) in privateAttrList" :key="index">
								<view class="attr-label">
									<view class="point-icon"></view>
									{{item.label}}
								</view>
								<view class="attr-value">{{item.value}}</view>
							</view>
						</view>
						<view class="info-title">基础属性
							<view class="bottom-line">
								<view class="line"></view>
								<view class="line-content"></view>
								<view class="line"></view>
							</view>
						</view>
						<view class="base-attr-box">
							<!-- <view class="attr-title">基础属性</view> -->
							<view class="attr-list">
								<view class="attr-item" v-for="(item,index) in baseAttrList" :key="index">
									<view class="attr-label">
										<view class="point-icon"></view>
										<!-- <view class="attr-icon">
											<image class="icon-img" :src="item.icon" mode="aspectFill"></image>
										</view> -->
										<view class="attr-label-text">{{item.label}}</view>
									</view>
									<view class="attr-value">{{item.value}}</view>

								</view>

							</view>

						</view>

						<view class="info-title">高级属性
							<view class="bottom-line">
								<view class="line"></view>
								<view class="line-content"></view>
								<view class="line"></view>
							</view>
						</view>
						<view class="senior-attr-box">
							<view class="attr-list">
								<view class="attr-item" v-for="(item,index) in seniorAttrList" :key="index">
									<view class="attr-label">
										<view class="point-icon"></view>


										<view class="attr-label-text">{{item.label}}</view>
									</view>
									<view class="attr-value">{{item.value}}</view>

								</view>

							</view>

						</view>

						<view class="info-title">人物技能
							<view class="bottom-line">
								<view class="line"></view>
								<view class="line-content"></view>
								<view class="line"></view>
							</view>
						</view>

						<view class="skill-box">
							<view class="skill-list">
								<view class="skill-item" v-for="(item,index) in skillList" :key="index"
									@touchstart="handleSkillClick(item,index)">
									<image :src="item.icon" mode="aspectFill" class="skill-img"></image>

								</view>
							</view>

						</view>







					</view>


					<view class="update-prop-box modal-content flex-column-start-center" v-if="type=='updateProp'">
						<view class="modal-title modal-title-no-padding">
							装备培养
							<view class="bottom-line">
								<view class="line-content"></view>
							</view>
							<view class="close-icon" @click="close">
								<image class="close-icon-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
									mode="aspectFill"></image>
							</view>
						</view>

						<view class="prop-info-box">
							<view class="title-box">
								<view class="title-content">
									<view class="left-tip">
										<view class="tip-icon"></view>
										<view class="tip-text">属性信息</view>
									</view>
									<view class="right-content"></view>
								</view>
							</view>
							<view class="prop-icon flex-row-center-center">
								<view class="prop-icon-item flex-column-start-center" :class="{'green-good': propData.RarityLevel == 1,
										          'orange-good': propData.RarityLevel == 2,
										          'blue-good': propData.RarityLevel == 3,
										          'purple-good': propData.RarityLevel == 4}">
									<view class="prop-icon-name name-text">{{propData.name}} Lv.{{propData.level}}
									</view>
									<view class="prop-bg-box flex-row-center-center">
										<view class="prop-list-item flex-row-center-center" :class="{'good-after-before':propData.image,'green-good': propData.RarityLevel == 1,
										          'orange-good': propData.RarityLevel == 2,
										          'blue-good': propData.RarityLevel == 3,
										          'purple-good': propData.RarityLevel == 4}">
											<view class="prop-content" v-if="propData.image">
												<image class="cover-img" :src="propData.image" mode="aspectFill">
												</image>
												<view class="prop-info flex-row-start-center">
													<view class="prop-start-list flex-row-start-center">
														<view class="porp-start-item flex-row-center-center"
															v-for="sitem in propData.starts">
															<image class="cover-img porp-start-item-img"
																src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
																mode="aspectFill"></image>
														</view>
													</view>
													<view class="porp-level flex-row-end-center">{{propData.level}}
													</view>
												</view>
											</view>
										</view>

									</view>
								</view>
								<image class="prop-next-icon"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/962bb21f1c1244c88271279728e583da.png"
									mode="aspectFill"></image>
								<view class="prop-icon-item flex-column-start-center" :class="{'green-good': propData.RarityLevel == 1,
										          'orange-good': propData.RarityLevel == 2,
										          'blue-good': propData.RarityLevel == 3,
										          'purple-good': propData.RarityLevel == 4}">
									<view class="prop-icon-name name-text">{{propData.name}} Lv.{{propData.level+1}}
									</view>
									<view class="prop-bg-box flex-row-center-center">
										<view class="prop-list-item flex-row-center-center" :class="{'good-after-before':propData.image,'green-good': propData.RarityLevel == 1,
										          'orange-good': propData.RarityLevel == 2,
										          'blue-good': propData.RarityLevel == 3,
										          'purple-good': propData.RarityLevel == 4}">
											<view class="prop-content" v-if="propData.image">
												<image class="cover-img" :src="propData.image" mode="aspectFill">
												</image>
												<view class="prop-info flex-row-start-center">
													<view class="prop-start-list flex-row-start-center">
														<view class="porp-start-item flex-row-center-center"
															v-for="sitem in propData.starts">
															<image class="cover-img porp-start-item-img"
																src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
																mode="aspectFill"></image>
														</view>
													</view>
													<view class="porp-level flex-row-end-center">{{propData.level+1}}
													</view>
												</view>
											</view>
										</view>

									</view>
								</view>

							</view>


							<view class="prop-level-range flex-row-center-center">
								<view class="prop-level-text">Lv.5/240</view>
								<view class="prop-level-range-content">
									<view class="prop-level-range-inner"></view>
								</view>
							</view>
							<view class="prop-attrs flex-column-center-center">
								<view class="prop-attr-item flex-row-center-center" v-for="(item,index) in propAttrList"
									:key="index">
									<view class="prop-label flex-row-center-center">
										<view class="point-icon"></view>
										<view class="prop-name">{{item.name}}</view>
									</view>
									<view class="prop-value ">{{item.nowValue}}</view>
									<image class="prop-next-icon"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/962bb21f1c1244c88271279728e583da.png"
										mode="aspectFill"></image>
									<view class="prop-value prop-next-value">{{item.nextValue}}</view>

								</view>

							</view>
						</view>
						<view class="prop-update-consume flex-column-start-center">
							<view class="title-box">
								<view class="title-content">
									<view class="left-tip">
										<view class="tip-icon"></view>
										<view class="tip-text">升级消耗</view>
									</view>
									<view class="right-content"></view>
								</view>
							</view>
							<view class="update-consume-list flex-row-start-center">
								<view class="prop-list-item flex-row-center-center" :class="{'good-after-before':item.image,'green-good': item.RarityLevel == 1,
								          'orange-good': item.RarityLevel == 2,
								          'blue-good': item.RarityLevel == 3,
								          'purple-good': item.RarityLevel == 4}" v-for="(item,index) in consumeList" :key="index">
									<view class="prop-add-icon flex-row-center-center" v-if="!item.image">
										<image class="cover-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
											mode="aspectFill"></image>
									</view>
									<view class="prop-content" v-if="item.image">
										<image class="cover-img" :src="item.image" mode="aspectFill"></image>
										<view class="update-consume-num flex-row-center-center">
											<view class="update-consume-num-now">{{item.nowNum}}</view> /
											<view class="update-consume-num-need">{{item.needNum}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="update-btn-box flex-row-center-center">
							<view class="btn-box flex-row-center-center" @click="handleRemoveProp">
								<view class="btn-item">
									<view class="btn-content ">卸下</view>
								</view>
							</view>
							<view class="btn-box flex-row-center-center">
								<view class="btn-item">
									<view class="btn-content start-live-btn">提升一级</view>
								</view>
							</view>
						</view>




						<view class="prop-tab-list flex-row-center-center">
							<view class="prop-list-item flex-row-center-center" :class="{'good-after-before':item.image,'green-good': item.RarityLevel == 1,
							          'orange-good': item.RarityLevel == 2,
							          'blue-good': item.RarityLevel == 3,
							          'purple-good': item.RarityLevel == 4,'act-prop-list-item':index==actPropIndex}"
								v-for="(item,index) in nowPropList" :key="index"
								@click="handlePropItemClick(item,index)">
								<view class="prop-add-icon flex-row-center-center" v-if="!item.image">
									<image class="cover-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
										mode="aspectFill"></image>
								</view>
								<view class="prop-content" v-if="item.image">
									<image class="cover-img" :src="item.image" mode="aspectFill"></image>
									<view class="prop-info flex-row-start-center">
										<view class="prop-start-list flex-row-start-center">
											<view class="porp-start-item flex-row-center-center"
												v-for="sitem in item.starts">
												<image class="cover-img porp-start-item-img"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
													mode="aspectFill"></image>
											</view>
										</view>
										<view class="porp-level flex-row-end-center">{{item.level}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>


					<view class="get-prop-box  modal-content flex-column-start-center" v-if="type=='getProp'">
						<view class="modal-title modal-title-no-padding">
							装备
							<view class="bottom-line">
								<view class="line-content"></view>
							</view>
							<view class="close-icon" @click="close">
								<image class="close-icon-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="prop-list-choose">
							<scroll-view ref="propScrollView" scroll-y class="scroll-content" :show-scrollbar="false"
								:scroll-with-animation="true">
								<!-- 左侧 -->
								<view class="prop-info-content item-bottom-line flex-row-start-center"
									v-for="(item,index) in propList" :key="index">
									<view class="prop-item  flex-row-between-center">
										<view class="prop-list-item flex-row-center-center" :class="{'good-after-before':item.image,'green-good': item.RarityLevel == 1,
										          'orange-good': item.RarityLevel == 2,
										          'blue-good': item.RarityLevel == 3,
										          'purple-good': item.RarityLevel == 4}">
											<view class="prop-content" v-if="item.image">
												<image class="cover-img" :src="item.image" mode="aspectFill">
												</image>
												<view class="prop-info flex-row-start-center">
													<view class="prop-start-list flex-row-start-center">
														<view class="porp-start-item flex-row-center-center"
															v-for="sitem in item.starts">
															<image class="cover-img porp-start-item-img"
																src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
																mode="aspectFill"></image>
														</view>
													</view>
													<view class="porp-level flex-row-end-center">{{item.level}}
													</view>
												</view>
											</view>
										</view>

										<!-- 名称等信息 -->
										<view class="prop-item-info-text flex-column-center-start">
											<view class="prop-name">{{item.name}}</view>
											<view class="prop-power flex-row-start-center">
												<image class="prop-power-icon"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9d57ab450cd5421184078a4df091b28e.png"
													mode="aspectFill"></image>
												<text class="prop-power-text">{{item.dancePower}}</text>
											</view>
										</view>

									</view>

									<view class="get-prop-btn flex-row-center-center">
										<view class="btn-box flex-row-center-center"
											@click="handleWearPorp(item,index)">
											<view class="btn-item">
												<view class="btn-content start-live-btn">穿 戴</view>
											</view>
										</view>
									</view>
								</view>


							</scroll-view>

						</view>


					</view>

				</view>

				<view class="transparent-modal" v-if="showSkillModal" @click.stop="handleSkillModalClick">
					<view class="tm-content" @click.stop>
						<view class="tm-top-base">
							<view class="tm-icon">
								<image class="tm-icon-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cbda9671f71b4bc79e0d4b3921495824.png"
									mode="aspectFill"></image>
							</view>
							<view class="tm-info">
								<view class="skill-name">
									热情洋溢
								</view>

								<view class="skill-info-row">
									<view class="info-row">
										<view class="row-label">类型</view>
										<view class="row-value">技能</view>
									</view>
									<view class="info-row">
										<view class="row-label">等级</view>
										<view class="row-value level">2</view>
									</view>
								</view>

							</view>

						</view>

						<view class="tm-intro-box">
							<view class="tm-intro-person">夏红热情而自信地表达观点，对目标造成185%攻击伤害，并回复自身攻击49%的气势。

								<view class="bottom-line"></view>
							</view>
							<view class="tm-intro-skill">

								<scroll-view ref="scrollView" scroll-y class="scroll-content" :show-scrollbar="false"
									:scroll-with-animation="true">
									<view class="skill-intro-item"
										:class="{'now-intro-item':(index+1)==2,'exceed-intro-item':(index+1)<2}"
										v-for="(item,index) in tempLevelIntrolList" :key="index">
										{{item}}
									</view>

								</scroll-view>
							</view>

						</view>
					</view>

				</view>




				<view class="bottom-tip">
					<view class="left-point"></view>
					<view class="m-center-content">点击任意空白区域关闭</view>
					<view class="right-point"></view>
				</view>





			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				type: '', // base updateProp getProp
				showSkillModal: false,
				show: false,
				actPropIndex: 0,
				wearIndex: -1,
				preType: "",
				consumeList: [{
					name: "星愿",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/366f960ebbe8430f916cb6d917051ed4.png",
					RarityLevel: 4,
					// starts: 3,
					level: 30,
					needNum: 15,
					nowNum: 0


				}],
				propAttrList: [{
						name: "技巧",
						nowValue: 1436,
						nextValue: 1448
					},
					{
						name: "魅力",
						nowValue: 139,
						nextValue: 148
					},
					{
						name: "人气",
						nowValue: 1200,
						nextValue: 1300
					},
					{
						name: "防御",
						nowValue: 500,
						nextValue: 560
					},
				],
				propData: {
					name: "星愿",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e583cc7e76d74f8fa1155dc1ddc2a5ac.png",
					RarityLevel: 4,
					starts: 3,
					level: 30,
					dancePower: 3306
				},
				nowPropList: [{
						name: "星愿",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e583cc7e76d74f8fa1155dc1ddc2a5ac.png",
						RarityLevel: 4,
						starts: 3,
						level: 30,
						dancePower: 3306
					},
					{
						name: "流萤",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9fe056b27df44b03a156532100eab8ea.png",
						RarityLevel: 3,
						starts: 2,
						level: 35,
						dancePower: 3306
					},
					{
						name: "雨落之屏",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/52a8929435334703a976df3284094614.png",
						RarityLevel: 2,
						starts: 1,
						level: 40,
						dancePower: 3306
					}, {
						name: "纸刃",
						image: "",
						RarityLevel: 1,
						starts: 1,
						level: 0,
						dancePower: 3306
					},


				],
				propList: [{
						name: "星愿",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e583cc7e76d74f8fa1155dc1ddc2a5ac.png",
						RarityLevel: 4,
						starts: 3,
						level: 30,
						dancePower: 3306
					},
					{
						name: "流萤",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9fe056b27df44b03a156532100eab8ea.png",
						RarityLevel: 3,
						starts: 2,
						level: 35,
						dancePower: 3306
					},
					{
						name: "雨落之屏",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/52a8929435334703a976df3284094614.png",
						RarityLevel: 2,
						starts: 1,
						level: 40,
						dancePower: 3306
					}, {
						name: "纸刃",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/828c553753b842718c000ab89fb13f01.png",
						RarityLevel: 1,
						starts: 1,
						level: 0,
						dancePower: 3306
					},
				],
				tempLevelIntrolList: [
					"等级1:造成180%伤害，回复自身攻击45%气势。",
					"等级2:造成185%伤害，回复自身攻击49%气势。",
					"等级3:造成190%伤害，回复自身攻击53%气势。",
					"等级4:造成195%伤害，回复自身攻击56%气势。",
					"等级5:造成200%伤害，回复自身攻击60%气势。",
					"等级6:造成205%伤害，回复自身攻击63%气势。",
					"等级7:造成210%伤害，回复自身攻击66%气势。",
					"等级8:造成215%伤害，回复自身攻击72%气势。",
					"等级9:造成220%伤害，回复自身攻击75%气势。",
				],
				privateAttrList: [{
						label: "年龄",
						value: "25岁"
					},
					{
						label: "星座",
						value: "白羊座"
					},
					{
						label: "定位",
						value: "治疗"
					},
					{
						label: "类型",
						value: "魅惑"
					},
				],
				baseAttrList: [{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "攻击",
						value: "25397",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "防御",
						value: "1889",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "气势",
						value: "90121",
					},
				],
				seniorAttrList: [{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "效果命中",
						value: "10.8%",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "效果闪避",
						value: "10.3%",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "击破率",
						value: "14.4%",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "抗击破",
						value: "16.2%",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "暴击率",
						value: "23.4%",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "抗暴率",
						value: "40.3%",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "强化暴伤",
						value: "3.6%",
					},
					{
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac4b45ca35f84fe2b57ea38ed5e335ac.png",
						label: "弱化暴伤",
						value: "0%",
					},
				],
				skillList: [{
						name: "技能1",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9bdfe3e27bf9450f8a526566c12f0b71.png",
						level: 1
					},
					{
						name: "技能2",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/27f970cfb3aa42a491cb68aeb67d75a7.png",
						level: 1
					},
					{
						name: "技能3",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5b2193f6e55a4ae88311806f7bc644ec.png",
						level: 1
					},
				]
			}
		},
		watch: {
			type: {
				handler(newVal, oldVal) {
					if (newVal == 'getProp') {
						this.preType = oldVal
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			handleRemoveProp() {
				this.$set(this.nowPropList, this.actPropIndex, null)
				this.$emit('removeProp', {
					index: this.actPropIndex
				})
				this.close()
			},
			handleWearPorp(item, index) {
				this.$set(this.nowPropList, this.wearIndex, item)
				this.$emit('wearProp', {
					index: this.wearIndex,
					data: item
				})
				this.close()
			},
			handlePropItemClick(item, index) {
				if (item && item.image) {
					this.actPropIndex = index
					this.propData = item
				} else {
					this.type = "getProp"
					this.wearIndex = index
				}
			},
			handleSkillModalClick() {
				this.showSkillModal = false
			},
			handleSkillClick(item, index) {
				this.showSkillModal = true
			},
			open(data) {
				this.type = data.type
				if (this.type == 'updateProp') {
					this.propData = data.data
					this.actPropIndex = data.index
				} else if (this.type == 'getProp') {
					this.wearIndex = data.index
				}
				this.show = true
			},
			close() {

				if (this.preType) {
					this.type = this.preType
					this.preType = ""
				} else {
					this.show = false
					this.actPropIndex = 0
					this.preType = ""
					this.type = ""
				}
				this.wearIndex = -1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-modal {
		pointer-events: fill;
	}

	.content-box {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: rgba(255, 255, 255, 0);
		backdrop-filter: blur(15rpx);
		pointer-events: fill;

		.info-title {
			position: relative;
			width: 100%;
			height: 50rpx;
			font-size: 30rpx;
			color: #3d3834;
			line-height: 50rpx;
			margin-bottom: 30rpx;
			box-sizing: content-box;

			.bottom-line {
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				width: 100%;
				height: 2rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.line {
					height: 100%;
					width: 50rpx;
					background: repeating-linear-gradient(to right,
							rgba(0, 0, 0, .3),
							rgba(0, 0, 0, .3) 5rpx,
							transparent 5rpx,
							transparent 10rpx);
					opacity: 0.4;
				}

				.line-content {
					// width: 100%;
					flex: 1;
					height: 100%;
					background-color: rgba(0, 0, 0, .3);
					opacity: 0.4;
				}
			}
		}

		.transparent-modal {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 9;
			background-color: rgba(0, 0, 0, .3);

			.tm-content {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 500rpx;
				height: 500rpx;
				border-radius: 5rpx;
				box-sizing: border-box;
				// border: 2rpx solid #fff;
				box-shadow: 0rpx 0rpx 4rpx #fff;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				z-index: 999999999;
				background-color: rgba(0, 0, 0, .6);
				pointer-events: fill;

				.tm-top-base {
					padding: 20rpx;
					background-color: rgba(235, 151, 152, .4);
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.tm-icon {
						width: 120rpx;
						height: 120rpx;
						box-shadow: 0rpx 0rpx 1rpx rgba(255, 255, 255, .8);
						margin-right: 20rpx;

						.tm-icon-img {
							width: 100%;
							height: 100%;
						}
					}

					.tm-info {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.skill-name {
							width: 100%;
							font-size: 24rpx;
							color: #fff;
							line-height: 24rpx;

						}

						.skill-info-row {
							width: 100%;

							.info-row {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								font-size: 20rpx;
								line-height: 20rpx;
								margin-bottom: 15rpx;

								&:last-child {
									margin-bottom: 0rpx;
								}

								.row-label {
									margin-right: 20rpx;
									color: rgba(255, 255, 255, .6);
								}

								.row-value {
									flex: 1;
									color: #fff;
								}

								.level {
									color: #f3d5bc;
								}

							}
						}


					}




				}

				.tm-intro-box {
					flex: 1;
					width: 100%;
					display: flex;
					justify-content: flex-start;
					flex-direction: column;
					padding: 25rpx 30rpx;
					overflow: hidden;
					padding-top: 15rpx;

					.tm-intro-person {
						position: relative;
						width: 100%;
						font-size: 20rpx;
						color: #fff;
						line-height: 30rpx;
						// letter-spacing: 2rpx;
						padding-bottom: 10rpx;

						.bottom-line {
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 2rpx;
							background-color: rgba(255, 255, 255, .3);
							opacity: 0.6;
						}
					}

					.tm-intro-skill {
						flex: 1;
						width: 100%;
						overflow: hidden;
						margin-top: 10rpx;

						.scroll-content {
							width: 100%;
							height: 100%;
							overflow: hidden;

							.skill-intro-item {
								width: 100%;
								font-size: 20rpx;
								line-height: 20rpx;
								margin-bottom: 10rpx;
								color: rgba(255, 255, 255, .6);
							}

							.exceed-intro-item {
								color: #fff;
							}

							.now-intro-item {
								color: rgba(91, 237, 126, .8);
							}
						}
					}


				}

			}
		}

		.center-content {
			width: 90%;
			box-shadow: 0rpx 0rpx 8rpx rgba(255, 255, 255, .8);
			pointer-events: fill;

			.update-prop-box {
				position: relative;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				height: 950rpx;
				overflow: visible;

				.prop-info-box {
					width: 100%;

					.prop-icon {
						width: 100%;
						height: 150rpx;
						margin-top: 20rpx;
						margin-bottom: 40rpx;


						.prop-icon-item {}

						.prop-icon-name {
							font-size: 24rpx;
							line-height: 24rpx;
							margin-bottom: 10rpx;
							text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .2);
						}

						.prop-bg-box {
							width: 150rpx;
							height: 150rpx;
							background-color: rgba(0, 0, 0, .01);
							border-radius: 50%;
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .2);
						}


					}


					.prop-level-range {
						width: 100%;
						height: 40rpx;
						margin-bottom: 40rpx;

						.prop-level-text {
							font-size: 24rpx;
							line-height: 24rpx;
							margin-right: 40rpx;

						}

						.prop-level-range-content {
							position: relative;
							width: 400rpx;
							height: 15rpx;
							border-radius: 15rpx;
							background-color: rgba(0, 0, 0, .1);
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
							overflow: hidden;

							.prop-level-range-inner {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 10%;
								height: 100%;
								background-color: #e9e1b1;
								border-radius: 15rpx;
							}
						}
					}

					.prop-attrs {
						width: 100%;

						.prop-attr-item {
							font-size: 24rpx;
							line-height: 24rpx;
							margin-bottom: 30rpx;

							.prop-label {
								color: #877760;
								margin-right: 60rpx;

								.prop-name {}
							}

							.prop-value {
								width: 80rpx;
								text-align: left;
								// background-color: pink;
							}

							.prop-next-value {
								color: #63b06d;
								text-align: right;
							}



						}
					}
				}

				.prop-update-consume {
					width: 100%;

					.update-consume-list {
						width: 100%;
						box-sizing: border-box;
						padding: 0rpx 40rpx;
						margin-top: 10rpx;
					}
				}

				.update-btn-box {
					width: 100%;
					margin-top: 20rpx;
				}

				.prop-tab-list {
					position: absolute;
					left: 0rpx;
					bottom: -140rpx;
					width: 100%;
					height: 120rpx;
					z-index: 9;





					.act-prop-list-item {
						box-shadow: 0rpx 0rpx 10rpx orange;
						border: 2rpx solid rgba(255, 255, 255, .8);
					}

				}
			}

			.base-info-box {
				box-sizing: border-box;
				padding: 20rpx 40rpx;
				height: 1000rpx;

				.private-info {
					position: relative;
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					align-items: center;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					padding-right: 28rpx;

					.private-item {
						width: 44%;
						height: 40rpx;
						font-size: 24rpx;
						color: #3d3834;

						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.attr-label {
							height: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							color: #877760;
							margin-right: 20rpx;
						}




						.attr-value {}
					}
				}

				.base-attr-box,
				.senior-attr-box {
					width: 100%;
					margin-top: 30rpx;
					position: relative;
					padding-bottom: 15rpx;

					.attr-title {
						width: 100%;
						height: 30rpx;
						font-size: 30rpx;
						color: #3d3834;
						line-height: 30rpx;
						margin-bottom: 30rpx;
					}

					.attr-list {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-wrap: wrap;
						box-sizing: border-box;
						padding-right: 28rpx;

						.attr-item {
							width: 44%;
							height: 40rpx;
							margin-bottom: 10rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.attr-label {
								height: 30rpx;
								font-size: 24rpx;
								line-height: 40rpx;
								color: #877760;
								display: flex;
								justify-content: flex-start;
								align-items: center;


								.point-icon {
									width: 8rpx;
									height: 8rpx;
									background-color: #877760;
									margin-right: 10rpx;
									transform: rotate(45deg);

								}

								.attr-icon {
									width: 30rpx;
									height: 30rpx;
									margin-right: 10rpx;
									border-radius: 50%;
									border: 1rpx solid #c2bebd;
									display: flex;
									justify-content: center;
									align-items: center;

									.icon-img {
										width: 70%;
										height: 70%;
									}
								}
							}

							.attr-value {
								font-size: 24rpx;
								line-height: 40rpx;
							}
						}
					}

				}

				.skill-box {
					width: 100%;
					margin-top: 30rpx;
					position: relative;
					padding-bottom: 15rpx;

					.attr-title {
						width: 100%;
						height: 30rpx;
						font-size: 30rpx;
						color: #3d3834;
						line-height: 30rpx;
						margin-bottom: 30rpx;
					}

					.skill-list {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.skill-item {
							position: relative;
							width: 100rpx;
							height: 100rpx;
							background-color: #fff;
							margin-right: 10rpx;
							box-shadow: 0rpx 0rpx 1rpx rgba(0, 0, 0, .3);

							.skill-img {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}


			.get-prop-box {
				position: relative;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				height: 950rpx;
				overflow: visible;

				.prop-list-choose {
					flex: 1;
					width: 100%;
					overflow: hidden;
					box-sizing: border-box;
					padding-bottom: 20rpx;

					.prop-info-content {
						position: relative;
						height: 140rpx;

						.prop-item {
							height: 100%;
							flex: 1;

							.prop-list-item {
								margin-right: 0rpx;
							}

							.prop-item-info-text {
								flex: 1;
								margin-left: 20rpx;

								.prop-name {
									font-size: 24rpx;
									line-height: 24rpx;
								}

								.prop-power {
									margin-top: 20rpx;

									.prop-power-icon {
										width: 60rpx;
										height: 30rpx;
										margin-right: 10rpx;
									}

									.prop-power-text {
										font-size: 20rpx;
										line-height: 20rpx;
									}
								}
							}
						}
					}


					.get-prop-btn {
						width: 140rpx;

						.btn-box {
							width: 120rpx;
							height: 50rpx;

							.btn-item {
								font-size: 22rpx;
								line-height: 50rpx;
							}
						}
					}



				}
			}



		}



	}



	.bottom-line {
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		width: 100%;
		height: 2rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.line {
			height: 100%;
			width: 50rpx;
			background: repeating-linear-gradient(to right,
					rgba(0, 0, 0, .3),
					rgba(0, 0, 0, .3) 5rpx,
					transparent 5rpx,
					transparent 10rpx);
			opacity: 0.4;
		}

		.line-content {
			// width: 100%;
			flex: 1;
			height: 100%;
			background-color: rgba(0, 0, 0, .3);
			opacity: 0.4;
		}
	}

	.prop-list-item {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		background-color: rgba(255, 255, 255, 0.3);
		box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
		margin-right: 30rpx;

		&:last-child {
			margin-right: 0rpx;
		}

		.prop-add-icon {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 30rpx;
		}

		.prop-content {
			position: relative;
			width: 100%;
			height: 100%;

			.update-consume-num {
				position: absolute;
				right: 0rpx;
				bottom: 2rpx;
				background-color: rgba(0, 0, 0, .3);
				font-size: 12rpx;
				line-height: 12rpx;
				color: #fff;
				padding: 5rpx;

				.update-consume-num-now {
					color: pink;
				}
			}

			.prop-info {
				position: absolute;
				left: 0rpx;
				bottom: 2rpx;
				width: 100%;
				z-index: 10;


				.prop-start-list {
					width: 60rpx;
					margin-left: 5rpx;

					.porp-start-item {
						width: 16rpx;
						height: 16rpx;

						.porp-start-item-img {
							transform: rotate(30deg);
						}
					}

				}

				.porp-level {
					flex: 1;
					font-size: 12rpx;
					line-height: 12rpx;
					color: #fff;
					margin-right: 5rpx;


				}
			}
		}
	}

	.point-icon {
		width: 8rpx;
		height: 8rpx;
		background-color: #877760;
		margin-right: 10rpx;
		transform: rotate(45deg);

	}

	.prop-next-icon {
		width: 25rpx;
		height: 25rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
</style>